<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<table id="slumber_result_table" class="easyui-datagrid" data-options="title:'Slumber Record List',fix:true,border:false"  
        url="${pageContext.request.contextPath}/slumberManagement/query.action" toolbar="#toolbar" pagination="true"  
        rownumbers="true" fitColumns="true" singleSelect="true">  
    <thead> 
        <tr>  
            <th field="Record Date" width="50">Record Date</th>  
            <th field="Slumber Date" width="50">Slumber Date</th>  
            <th field="Memory" width="50">Memory</th>  
        </tr> 
    </thead>  
    <tbody>
    	
    </tbody>
</table>  
<div id="toolbar">  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newRecord()">New Record</a>  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRecord()">Edit Record</a>  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyRecord()">Remove Record</a>  
</div>  
  
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
        closed="true" buttons="#dlg-buttons">  
    <div class="ftitle">Slumber Information</div>  
    <form id="fm" method="post" novalidate>  
        <div class="fitem">  
            <label>Record Date:</label>  
            <input name="record_date" class="easyui-validatebox" required="true">  
        </div>  
        <div class="fitem">  
            <label>Slumber Date:</label>  
            <input name="slumber_dtime" class="easyui-validatebox" required="true">  
        </div>  
        <div class="fitem">  
            <label>Memory:</label>  
            <input name="memo">  
        </div>  
    </form>  
</div>  
<div id="dlg-buttons">  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>  
</div>  
<script type="text/javascript">  
    var url;  
    function newRecord(){  
        $('#dlg').dialog('open').dialog('setTitle','New Record');  
        $('#fm').form('clear');  
        url = '${pageContext.request.contextPath}/slumberManagement/newRecord.action';  
    }  
    function editRecord(){  
        var row = $('#dg').datagrid('getSelected');  
        if (row){  
            $('#dlg').dialog('open').dialog('setTitle','Edit Record');  
            $('#fm').form('load',row);  
            url = '${pageContext.request.contextPath}/slumberManagement/updateRecord.action?id='+row.id;  
        }  
    }  
    function save(){  
        $('#fm').form('submit',{  
            url: url,  
            onSubmit: function(){  
                return $(this).form('validate');  
            },  
            success: function(result){  
                var result = eval('('+result+')');  
                if (result.errorMsg){  
                    $.messager.show({  
                        title: 'Error',  
                        msg: result.errorMsg  
                    });  
                } else {  
                    $('#dlg').dialog('close');      // close the dialog  
                    $('#dg').datagrid('reload');    // reload the user data  
                }  
            }  
        });  
    }  
    function destroyUser(){  
        var row = $('#dg').datagrid('getSelected');  
        if (row){  
            $.messager.confirm('Confirm','Are you sure you want to delete this Record?',function(r){  
                if (r){  
                    $.post('${pageContext.request.contextPath}/slumberManagement/query.action',{id:row.id},function(result){  
                        if (result.success){  
                            $('#dg').datagrid('reload');    // reload the user data  
                        } else {  
                            $.messager.show({   // show error message  
                                title: 'Error',  
                                msg: result.errorMsg  
                            });  
                        }  
                    },'json');  
                }  
            });  
        }  
    }  
</script>  
<style type="text/css">  
    #fm{  
        margin:0;  
        padding:10px 30px;  
    }  
    .ftitle{  
        font-size:14px;  
        font-weight:bold;  
        padding:5px 0;  
        margin-bottom:10px;  
        border-bottom:1px solid #ccc;  
    }  
    .fitem{  
        margin-bottom:5px;  
    }  
    .fitem label{  
        display:inline-block;  
        width:80px;  
    }  
</style>